export const measured = (map) => {
  let draw
  let draw1
  let source
  let source1
  // 测量线
  function distance() {
    //加载测量的绘制矢量层
    // map.value.removeInteraction(draw)
    if (draw1) {
      map.value.getOverlays().clear()
      map.value.removeInteraction(draw1)
      source1.clear() // 清空数据源
      draw1.setActive(false) //画笔失活
    }

    source = new ol.source.Vector() //图层数据源
    var layer = new ol.layer.Vector({
      source: source,
      style: new ol.style.Style({
        //图层样式
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)', //填充颜色
        }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33', //边框颜色
          width: 2, // 边框宽度
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    })
    var measureTooltipElement
    let helpTooltipElement
    let helpTooltip
    var measureTooltip

    let feature
    let listener
    map.value.on('pointermove', (ev) => {
      // 给地图添加一个鼠标移动事件
      let helpMsg = '点击开始测量' // 默认开始的操作提示文本
      if (feature) {
        // featuer 是全局的，判断有没有点击鼠标绘制过
        helpMsg = '双击结束测量' // 如果之前点击绘制了就显示双击结束
      }
      helpTooltipElement.innerHTML = helpMsg // 设置dom的提示文字
      helpTooltip.setPosition(ev.coordinate) // 设置位置跟着鼠标走
      helpTooltipElement.classList.remove('hidden') // 让他显示出来
    })
    createHelpTooltip() // 创建那个helpTooltipElement方法
    map.value.addLayer(layer) // 把图层添加到地图

    function createHelpTooltip() {
      if (helpTooltipElement) {
        helpTooltipElement.parentNode.removeChild(helpTooltipElement)
      }
      helpTooltipElement = document.createElement('div')
      helpTooltipElement.className = 'ol-tooltip hidden'
      helpTooltip = new ol.Overlay({
        element: helpTooltipElement,
        offset: [15, 0],
        positioning: 'center-left',
      })
      map.value.addOverlay(helpTooltip)
    }
    draw = new ol.interaction.Draw({
      source: source, //测量绘制层数据源
      type: 'LineString', //几何图形类型
      style: new ol.style.Style({
        //绘制几何图形的样式
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(0, 0, 0, 0.5)',
          lineDash: [10, 10],
          width: 2,
        }),
        image: new ol.style.Circle({
          radius: 5,
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 0, 0.7)',
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)',
          }),
        }),
      }),
    })
    map.value.addInteraction(draw)
    // 开始监听绘制
    draw.on('drawstart', (evt) => {
      feature = evt.feature // feature就是全局的
      let tooltipCoord = evt.coordinate // 鼠标当前的位置
      listener = feature.getGeometry().on('change', function (evt) {
        const geom = evt.target
        let output = formatLength(geom) // 距离的格式
        tooltipCoord = geom.getLastCoordinate() // 设置鼠标位置改变后的实时位置
        measureTooltipElement.innerHTML = output // 设置提示框的内容，就是距离
        measureTooltip.setPosition(tooltipCoord) // 设置距离提示框的位置
      })
    })

    // 格式化长度， 直接官网代码
    var formatLength = function (line) {
      var length
      var sphere = new ol.Sphere()
      //若使用测地学方法测量
      var sourceProj = map.value.getView().getProjection() //地图数据源投影坐标系
      length = sphere.getLength(line, {
        projection: sourceProj,
        radius: 6378137,
      })
      var output
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km' //换算成KM单位
      } else {
        output = Math.round(length * 100) / 100 + ' ' + 'm' //m为单位
      }
      return output //返回线的长度
    }
    function createMeasureTooltip() {
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement)
      }
      measureTooltipElement = document.createElement('div')
      measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'
      measureTooltip = new ol.Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center',
      })

      map.value.addOverlay(measureTooltip)
    }
    // 双击绘制完成
    draw.on('drawend', () => {
      measureTooltipElement.className = 'ol-tooltip ol-tooltip-static'
      measureTooltip.setOffset([0, -7])
      feature = null //置空当前绘制的要素对象
      measureTooltipElement = null //置空测量工具提示框对象
      createMeasureTooltip() //重新创建一个测试工具提示框显示结果
      ol.Observable.unByKey(listener)
    })
    createMeasureTooltip() // 创建那个距离的提示框
  }
  // 测量面
  function measuredArea() {
    if (draw) {
      map.value.getOverlays().clear()
      map.value.removeInteraction(draw)
      source.clear() // 清空数据源
      draw.setActive(false) //画笔失活
    }

    // map.value.removeInteraction(draw1)

    source1 = new ol.source.Vector() //图层数据源
    var layer = new ol.layer.Vector({
      source: source1,
      style: new ol.style.Style({
        //图层样式
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)', //填充颜色
        }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33', //边框颜色
          width: 2, // 边框宽度
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    })
    var measureTooltipElement
    let helpTooltipElement
    let helpTooltip
    var measureTooltip

    let feature
    let listener
    map.value.on('pointermove', (ev) => {
      // 给地图添加一个鼠标移动事件
      let helpMsg = '点击开始测量' // 默认开始的操作提示文本
      if (feature) {
        // featuer 是全局的，判断有没有点击鼠标绘制过
        helpMsg = '双击结束测量' // 如果之前点击绘制了就显示双击结束
      }
      helpTooltipElement.innerHTML = helpMsg // 设置dom的提示文字
      helpTooltip.setPosition(ev.coordinate) // 设置位置跟着鼠标走
      helpTooltipElement.classList.remove('hidden') // 让他显示出来
    })
    createHelpTooltip() // 创建那个helpTooltipElement方法
    map.value.addLayer(layer) // 把图层添加到地图

    function createHelpTooltip() {
      if (helpTooltipElement) {
        helpTooltipElement.parentNode.removeChild(helpTooltipElement)
      }
      helpTooltipElement = document.createElement('div')
      helpTooltipElement.className = 'ol-tooltip hidden'
      helpTooltip = new ol.Overlay({
        element: helpTooltipElement,
        offset: [15, 0],
        positioning: 'center-left',
      })
      map.value.addOverlay(helpTooltip)
    }
    draw1 = new ol.interaction.Draw({
      source: source1, //测量绘制层数据源
      type: 'Polygon', //几何图形类型
      style: new ol.style.Style({
        //绘制几何图形的样式
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(0, 0, 0, 0.5)',
          lineDash: [10, 10],
          width: 2,
        }),
        image: new ol.style.Circle({
          radius: 5,
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 0, 0.7)',
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)',
          }),
        }),
      }),
    })
    map.value.addInteraction(draw1)
    // 开始监听绘制
    draw1.on('drawstart', (evt) => {
      feature = evt.feature // feature就是全局的
      let tooltipCoord = evt.coordinate // 鼠标当前的位置
      listener = feature.getGeometry().on('change', function (evt) {
        const geom = evt.target

        let output = formatArea(geom) //面积值
        tooltipCoord = geom.getInteriorPoint().getCoordinates() //坐标
        measureTooltipElement.innerHTML = output // 设置提示框的内容，就是距离
        measureTooltip.setPosition(tooltipCoord) // 设置距离提示框的位置
      })
    })

    var formatArea = function (polygon) {
      var area
      var sphere = new ol.Sphere()
      //使用测地学方法测量
      var sourceProj = map.value.getView().getProjection() //地图数据源投影坐标系
      var geom = /** @type {ol.geom.Polygon} */ (
        polygon.clone().transform(sourceProj, 'EPSG:4326')
      ) //将多边形要素坐标系投影为EPSG:4326
      area = Math.abs(
        sphere.getArea(geom, { projection: sourceProj, radius: 6378137 })
      ) //获取面积

      var output
      if (area > 10000) {
        output =
          Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>' //换算成KM单位
      } else {
        output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>' //m为单位
      }
      return output //返回多边形的面积
    }
    function createMeasureTooltip1() {
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement)
      }
      measureTooltipElement = document.createElement('div')
      measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'
      measureTooltip = new ol.Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center',
      })

      map.value.addOverlay(measureTooltip)
    }
    // 双击绘制完成
    draw1.on('drawend', () => {
      measureTooltipElement.className = 'ol-tooltip ol-tooltip-static'
      measureTooltip.setOffset([0, -7])
      feature = null //置空当前绘制的要素对象
      measureTooltipElement = null //置空测量工具提示框对象
      createMeasureTooltip1() //重新创建一个测试工具提示框显示结果
      ol.Observable.unByKey(listener)
    })
    createMeasureTooltip1() // 创建那个距离的提示框
  }

  // 取消绘制
  function cancal() {
    if (draw && draw1) {
      map.value.getOverlays().clear() //移除提示框
      map.value.removeInteraction(draw)
      map.value.removeInteraction(draw1)

      source.clear() // 清空数据源
      source1.clear() // 清空数据源
      draw.setActive(false) //画笔失活
      draw1.setActive(false) //画笔失活
    } else if (draw == '' && draw1 != '') {
      map.value.getOverlays().clear()
      map.value.removeInteraction(draw)
      source.clear() // 清空数据源
      draw.setActive(false) //画笔失活
    } else if ((draw1 = '' && draw != '')) {
      map.value.getOverlays().clear()
      map.value.removeInteraction(draw1)
      source1.clear() // 清空数据源
      draw1.setActive(false) //画笔失活
    } else if (draw) {
      map.value.getOverlays().clear()
      map.value.removeInteraction(draw)
      source.clear() // 清空数据源
      draw.setActive(false) //画笔失活
    } else if (draw1) {
      map.value.getOverlays().clear()
      map.value.removeInteraction(draw1)
      source1.clear() // 清空数据源
      draw1.setActive(false) //画笔失活
    }
  }
  // 下载地图
  function loadMap() {
    map.value.once('postcompose', function (event) {
      const canvas = event.context.canvas
      canvas.toBlob(function (blob) {
        saveAs(blob, 'map.png')
      })
    })
  }
  return {
    distance,
    measuredArea,
    cancal,
    loadMap,
  }
}
